<script lang="ts" setup>
import laudIcon from "@/components/icon/LaudIcon.vue";
import ShareIcon from "@/components/icon/ShareIcon.vue";
import { useRouter } from "vue-router";
import { HomeDeatilType } from "@/typing";
import { toRefs } from "vue";
import { titleTypes } from "@/datas/index";
import { homeStoriesStore } from "../../store";

const store = homeStoriesStore();
const { updateArticle } = store;

const router = useRouter();

const props = defineProps<{
    listItem: HomeDeatilType,
    category: string
}>()

const { listItem, category } = toRefs(props)

function goToArticleDetail(id: string, category: string, title: string) {
    updateArticle(id, category, title);

    router.push({
        name: 'article-detail'
    })
}
</script>

<!-- 主页文章 -->
<template>
    <div class="p-8">
        <div @click="goToArticleDetail(listItem.item_id, category, listItem.title)">
            <div class="text-center text-gray-400 ">- {{ titleTypes[category] }} -</div>
            <div class="text-3xl mt-8">{{ listItem.title }}</div>
            <div class="text-gray-400 mt-3">文 / {{ listItem.author.user_name }}</div>
            <div class="py-10  min-h-[4 rem] text-2xl">{{ listItem.forward }}</div>
            <img class="rounded-2xl" rounded-t-sm :src="listItem.img_url" alt="img">
        </div>
        <div class="flex justify-end items-center pt-8 pr-3">
            <laudIcon :countNum="listItem.like_count" />
            <div class="ml-14">
                <ShareIcon :type="0" :shareList="listItem.share_list" />
            </div>

        </div>
    </div>
</template>